<template>
    <div>
        <div class="goodsInfo_li" v-if="goods.goodsImages">
            <div class="goodsInfo_img" v-if="goods.goodsImages.length>0">
                <img :src='imgUrl+goods.goodsImages[0].goodsImage'>
            </div>
            <img v-else :src="goodsImage">
            <!--
                <div class="goodsInfo_list">
                    <div class="goodsInfo_title" v-if="goods.goodsName">
                        {{goods.goodsName}}
                    </div>
                </div>
             -->
            <div class="goodsInfo_img1" v-if="goods.goodsImages.length>1">
                <img :src='imgUrl+goods.goodsImages[1].goodsImage'>
            </div>
        </div>

        <div style="background:#E94738;height:11.2rem;">
            <br>
            <div style="text-align:center;color:#fff;font-size:15px;" v-if="dealFlg == '1'">
                您需要登录后才能砸蛋，点此<span style="color: #F0F026;" @click="login">登录</span>
            </div>
            <div style="text-align:center;color:#fff;font-size:15px;" v-if="dealFlg == '2'">
                分享本页商品，再砸一次金蛋。<span style="font-size:20px;color: #F0F026;" @click="shared">点此分享</span>
            </div>
            <div class="weixinTip" v-if="dealFlg == '3'" @click.stop="closeImg">
                <p><img src="../../assets/shareWeixin.png"/></p>
            </div>
            <div class="egg">
                <ul class="eggList" v-if="hammerShow==true"> 
                    <p class="hammer">锤子</p>
                    <li class="curr1" @click="eggClick">
                    </li>
                </ul>
                <ul class="eggList" v-if="hammerShow==false">
                    <p class="resultTip" id="resultTip" v-show="dealFlg != '3'">
                        <b v-html="retHtml"></b>
                    </p> 
                    <li class="curr2">
                        <sup class="sup"></sup>
                    </li>
                </ul>
            </div>
            <div class="box_tit">
                <div class="box_top">
                    今日已砸蛋<span id="count">{{todayCount}}</span>个！
                </div>
            </div>
            <div class="swiper-container">
                <transition-group tag="div" class="swiper-container" 
                                    enter-active-class="animated fadeInUp" 
                                    leave-active-class="animated fadeOutUp">
                    <div id="swiperWrapper" class="swiper-wrapper" v-for="item in swiperShowList" :key="item.key">
                        <div style="text-align: center;" v-html="item.value"></div>
                    </div>
                </transition-group>
            </div>
            <yd-popup v-model="popShow" position="center" width="90%">
                <yd-layout>
                    <div style="margin-left:6.19rem;margin-top:-1px">
                        <yd-icon style="color:gray" name="error" @click.native="popShow=false"></yd-icon>
                    </div>
                    <div class='l_cps'>
                        <div class='l_hh'>活动规则</div>
                        <ul >
                            <li>每位“关爱平台”用户每天均有一次“砸金蛋”机会;</li>
                            <li>每位“关爱平台”用户每天分享本页面商品就能再得一次“砸金蛋”机会;</li>
                            <li>每次砸金蛋均有一定的几率获得“彩红包”奖品;</li>
                            <li>“彩红包”奖品详情可至关爱平台个人中心查看及开奖后提现;</li>
                            <li>“彩红包”奖品指彩票+现金红包的组合，彩票开奖后用户将获得彩票奖金及现金红包合计金额;</li>
                            <li>本活动最终解释权归关爱平台所有。</li>
                        </ul>
                    </div>
                </yd-layout>
            </yd-popup>
            <div class="activity">
                <span @click="popShow=true">活动规则</span>
            </div>
        </div>
    </div>
</template>

<script>
// import moment from "moment";
import animate from "animate.css";
// import wx from 'weixin-js-sdk'

export default {
    name: "winegg",
    data() {
        return {
        imgUrl: this.CONSTANT.imgBaseUrl,
        goods: {},
        goodsImage: "",         // 只有一个商品时的商品图片
        shareGoodsImage: "",   // 分享用商品图片
        popShow: false,
        hammerShow: true,
        retHtml: "",
        userid: "",
        memberInfo: {},
        todateEggsInfo: {},
        dealFlg: "0",           // 0：初始时； 2：可以分享； 1：分享成功； 3：机会已用完
        goodsCommonid: "",
        ylhdToken: "",
        todayCount: 0,
        activeFlg: 1,    // 0：推广商品没有；1：正常； 2：今日已砸中过蛋； 3：没有取到易连互动的TokenId
        maxShowSize: 5, // 滚动栏内最多显示的记录数
        swiperAllList: [],
        swiperStartIndex: 0,
        swiperShowList: []
        };
    },
    mounted() {
        // 设置滚动栏的内容
        setInterval(_ => {
                this.setShowInfo();  
            }, 2000);
    },
    created: function() {
        // 通过链接进入平台，但没有关注过公众号时,重新设定模式 
        // 取得浏览器的信息（无论有没有设定过都需要重新设定）
        let userAgent = navigator.userAgent.toLowerCase();
        // 企业微信浏览器多了wxwork
        if (userAgent.indexOf("wxwork") > -1) {
            this.$store.commit('inMode', 'qiye');
        } else {
            this.$store.commit('inMode', 'weixin');
        }

        this.goodsCommonid = this.$route.query.goodsCommonid;
        this.userid = this.$store.state.userid;
        // 认证是否登录
        if (this.userid == undefined || this.userid == '') {
            this.dealFlg = "1";
        }
        
        //  inits的处理顺序：用户信息、商品信息、今日砸蛋信息、中奖信息、
        this.inits();
        
        // 发送PV统计请求
        _czc.push(["_trackPageview", "/winegg", ""]); 
    },
    methods: {
        inits() {
            this.$dialog.loading.open("请稍后");
            
            // 用户ID有的场合
            if (this.userid) {
                // 取得用户信息（各项取得成功后再取下一个）
                this.getUserInfo();

                // 取得顺序：取得用户信息、取得今日砸蛋信息（当前用户）、取得易连互动TOKENID、取得商品信息、
                // 显示今日砸蛋信息（当前用户）、取得今日已砸蛋个数并显示砸蛋信息（所有用户）
            } else {
                // 易连互动的TokenID的取得
                this.getYlhdToken();
                
                // 取得顺序：取得易连互动TOKENID、取得商品信息、 取得今日已砸蛋个数并显示砸蛋信息（所有用户）
            }

            // 重新设置共享信息(分项当前页面)
            let opt = {
                link: '?#/winegg?goodsCommonid=' + this.goodsCommonid,
                desc: '天天惊喜',
                img: 'static/close.png',
                inMode: this.$store.state.inMode,
                eggShared: 0  //2以外的值都可以，阻止分享成功信息的显示
            };
            this.$store.commit("scan", opt);
        },
        getUserInfo() {
            this.$axios.get(this.CONSTANT.wapiBaseUrl + "member/memberDetail")
                .then(response => {

                    if (response.status == 200) {
                        this.memberInfo = response.data.object;

                        if (localStorage.hasOwnProperty("eggShared")) {
                            if (localStorage.getItem("eggShared") == 1) {
                                // 更新完砸蛋信息后再去重新取得今日砸蛋信息、以便后续操作的进行
                                this.updateTodayInfo(1);
                            }
                            localStorage.removeItem("eggShared");
                        } else {
                            // 取得今日砸蛋信息，今日没有的话，就登录一条数据
                            this.getTodayEggsInfo();
                        }
                    } else {
                        // status == 401 (main.js 里面已经拦截, 此处取得的值是 undefined)
                        // 用户没有登录
                        this.dealFlg = "1";

                        // 易连互动的TokenID的取得
                        this.getYlhdToken();
                        
                        // 取得顺序：取得易连互动TOKENID、取得商品信息、 取得今日已砸蛋个数并显示砸蛋信息（所有用户）
                    }
                })
                .catch(error => {
                    this.$dialog.loading.close();
                    console.log("getUserInfo error" + error);
                });
        },
        getTodayEggsInfo() {
            this.$axios.get(this.CONSTANT.wapiBaseUrl + "winEggs/getTodayInfo")
                .then(response => {
                    if (response.status == 200) {
                        this.todateEggsInfo = response.data.object;

                        // 易连互动的TokenID的取得
                        this.getYlhdToken();
                    }
                })
                .catch(error => {
                    this.$dialog.loading.close();
                    console.log("geTodayEggsInfo error" + error);
                });
        }, 
        getYlhdToken() {
            this.$axios.get(this.CONSTANT.wapiBaseUrl + "lottery/getTokenId?appId=" + this.CONSTANT.lotteryAppId + "&appSecret=" + this.CONSTANT.lotteryAppSecret)
                .then(response => {
                    if (response.status == 200) {
                        if (response.data.status == 1) {
                            if (response.data.object.code == "200") {
                                this.ylhdToken = response.data.object.tokenId;

                                // 推广商品图片的取得
                                this.getGoodsInfo();
                            } else {
                                this.$dialog.loading.close();
                                this.activeFlg = 3;
                                this.$dialog.toast({
                                    mes: '彩红包TokenId取得失败，请联系客服',
                                    icon: 'error',
                                    timeout: 1500
                                });
                            }
                        } else {
                            // Exception时、response.data.status == -1
                            this.$dialog.loading.close();
                            this.activeFlg = 3;
                            this.$dialog.toast({
                                mes: '彩红包TokenId取得失败，请联系客服',
                                icon: 'error',
                                timeout: 1500
                            });
                        }
                    }
                })
                .catch(error => {
                    this.$dialog.loading.close();
                    console.log("getYlhdToken error" + error);
                });
        }, 
        getGoodsInfo() {
            this.$axios.get(this.CONSTANT.wapiBaseUrl + "goods/info?goodsCommonid=" + this.goodsCommonid)
                .then(response => {
                    if (response.status == 200) {
                        this.goods = response.data.object;
                        this.goodsImage = this.imgUrl + response.data.object.goodsImage;
                        // 只有一个商品时
                        this.shareGoodsImage =  response.data.object.goodsImage;
                        if (response.data.object.goodsImages.length > 0) {
                            this.shareGoodsImage =  response.data.object.goodsImages[0].goodsImage;
                        }

                        // 取得今日已砸蛋个数
                        if (this.ylhdToken) {
                            this.getRedLotteryCount(1);
                        }
                    } else {
                        this.$dialog.loading.close();
                        this.activeFlg = 0;
                        this.$dialog.toast({
                                mes: "推广商品信息取得失败，彩红包砸金蛋活动暂停！",
                                timeout: 1500
                            });
                    }
                })
                .catch(error => {
                    this.$dialog.loading.close();
                    this.activeFlg = 0;
                    this.$dialog.toast({
                        mes: "推广商品信息取得失败，彩红包砸金蛋活动暂停！",
                        timeout: 1500
                    });
                });
        },
        getRedLotteryCount(initFlg) {
            // 今日已砸蛋个数的取得
            let param = "appId=" + this.CONSTANT.lotteryAppId;
            param = param + "&tokenId=" + this.ylhdToken;
            param = param + "&activeId=" + this.CONSTANT.lotteryActiveId;

            this.$axios.get(this.CONSTANT.wapiBaseUrl + "lottery/getRedLotteryCount?" + param)
                .then(response => {
                    this.$dialog.loading.close();
                    if (response.status == 200) {
                        if (response.data.status == 1) {
                            // 如果是200，返回结果列表件数
                            if (response.data.object.code == "200") {
                                this.todayCount = response.data.object.recordNum;

                                // 清空检索结果的全部数据LIST
                                this.swiperAllList = [];
                                for (var i = 0; i < response.data.object.recordList.length; i++) {
                                    let record = response.data.object.recordList[i];
                                    // 显示手机号，隐藏中间四位
                                    let memberMobile = record.customerId;
                                    if (memberMobile.length == 11) {
                                        memberMobile = memberMobile.substring(0, 3) + "****" + memberMobile.substring(7, 11);
                                    }
                                    let recHtml = memberMobile + '<span style="color:#333;">刚刚砸出了</span>彩红包';
                                    let recInfo = {key:record.customerId, value:recHtml};
                                    this.swiperAllList.push(recInfo);

                                    // 判断当前用户今天是否已经砸过蛋
                                    if (initFlg == 1) {
                                        if (record.customerId == this.memberInfo.memberMobile) {
                                            this.activeFlg = 2;
                                        }
                                    }
                                }
                                // 今天已经砸中过蛋
                                if (this.activeFlg == 2) {
                                    // this.$dialog.alert({mes: '今天已砸过蛋,明天可重新砸蛋！'});
                                    this.hammerShow = false;
                                    // this.retHtml = "今天已砸过蛋,明天再来！";
                                    this.retHtml = "今天您已参加过活动，明天继续呦，请进入关爱平台个人中心查看结果！";
                                   // this.updateTodayInfo(0); // 第二天能不能用已根据日期判断
                                }

                                // 设置砸蛋显示信息
                                if (this.todateEggsInfo.memberId) { 
                                    this.setRetHtml();
                                }

                                // 设置第一次的滚动栏的内容
                                this.setShowInfo(); 
                            } else {
                                // 设置砸蛋显示信息
                                if (this.todateEggsInfo.memberId) { 
                                    this.setRetHtml();
                                }
                            }
                        }
                    }
                })
                .catch(error => {
                    this.$dialog.loading.close();
                });
        },
        setRetHtml() {
            // 初始时：0； 可以分享：2； 分享成功：1； 机会已用完：3
            // 分项成功后、去掉遮罩层
            if (this.todateEggsInfo.clickNum == 1) {
                if (this.dealFlg == "3") {
                    this.dealFlg = "0";
                }
            }
            // 今天还未分项
            if (this.todateEggsInfo.clickNum == 2) {
                // 重新设置共享信息
                let opt = {
                    goodsCommonid: this.goods.goodsCommonid,
                    name: this.goods.goodsName,
                    img: this.shareGoodsImage,
                    inMode: this.$store.state.inMode,
                    eggShared: this.todateEggsInfo.clickNum
                };
                this.$store.commit("scan", opt);
                this.hammerShow = false;
                this.retHtml = "您还没有分享本页面商品，不能继续砸蛋。";
                this.dealFlg = "2";
            }
            // 机会已用完
            if (this.todateEggsInfo.clickNum == 3) {
                // this.$dialog.alert({mes: '很遗憾，您今日已没有中奖机会！明天再来试试手气！'});
                this.hammerShow = false;
                this.retHtml = "很遗憾，您今日已没有中奖机会！明天再来试试手气！";
                //this.updateTodayInfo(0);  // 测试用（第二天能不能用根据日期判断）
            }
        },
        setShowInfo() {
            // 清空滚动显示的LIST
            this.swiperShowList = [];

            // 设置显示的内容
            // 全部数据不足一栏时
            if (this.swiperAllList.length <= this.maxShowSize) {
                for (let i = 0; i < this.swiperAllList.length; i++) {
                    this.swiperShowList.push(this.swiperAllList[i]);
                }

                return false;
            }

            // 全部数据一次显示不完时
            for (let i = this.swiperStartIndex; i < this.swiperAllList.length; i++) {
                this.swiperShowList.push(this.swiperAllList[i]);
                if (this.swiperShowList.length == this.maxShowSize) {
                    break;
                }
            }
            if (this.swiperShowList.length < this.maxShowSize) {
                for (let i = 0; i < this.swiperAllList.length; i++) {
                    this.swiperShowList.push(this.swiperAllList[i]);
                    if (this.swiperShowList.length == this.maxShowSize) {
                        break;
                    }
                }
            }
            // 下次显示的数据的开始INDEX
            if (this.swiperStartIndex < this.swiperAllList.length) {
                this.swiperStartIndex += 1;
            } else {
                this.swiperStartIndex = 0;
            }
        },
        login() {
            this.$router.push("/fastLogin?page=winegg");
        },
        shared() { 
            // 自定义分享按钮、不能触发 wx.onMenuShareAppMessage 事件
            this.dealFlg = "3";
        },
        closeImg() {
            this.dealFlg = "2";
        },
        eggClick() {
            // 推广商品信息取得失败，彩红包砸金蛋活动暂停！
            if (this.activeFlg == 0) {
                this.$dialog.toast({
                            mes: "推广商品信息取得失败，彩红包砸金蛋活动暂停！",
                            timeout: 1500
                        });
                return false;
            }
            // 彩红包TokenId取得失败，请联系客服
            if (this.activeFlg == 3) {
                this.$dialog.toast({
                            mes: "彩红包TokenId取得失败，请联系客服！",
                            timeout: 1500
                        });
                return false;
            }
            // 易连互动的TokenID没有取到时
            if (this.ylhdToken == undefined || this.ylhdToken == "") {
                this.$dialog.toast({
                        mes: "彩红包砸金蛋的TokenID取到失败，请重新进入该页面！",
                        timeout: 1500
                    });
                return false;
            }
            // 认证是否登录
            if (this.userid == undefined || this.userid == '') {
                this.$dialog.toast({
                        mes: "请先点击页面上的登录链接登录后再来砸金蛋！",
                        timeout: 1500
                    });
                return false;
            }

            // 砸蛋后的处理
            // 蛋碎效果 金花四溅  隐藏锤子
            this.hammerShow = false;

            // 是否中奖的判断处理
            // 中奖需要的数字、成随机数
            let currNum = Math.random();
            // 使用向上取整
            currNum = Math.ceil(currNum * 10);

            //中奖结果
            // 第一次概率50%； 第二次概率100%
            if ((this.todateEggsInfo.clickNum == 0 && currNum < 6) || 
                  (this.todateEggsInfo.clickNum == 1 && currNum > 0)) {

                this.retHtml = "恭喜您今日砸中彩红包";

                // 跳转到领奖页面，不需要再进行商品分享
                // 取得一个彩虹包
                let param = "appId=" + this.CONSTANT.lotteryAppId;
                param = param + "&tokenId=" + this.ylhdToken;
                param = param + "&activeId=" + this.CONSTANT.lotteryActiveId;
                param = param + "&customerId=" + this.memberInfo.memberMobile;

                this.$axios.get(this.CONSTANT.wapiBaseUrl + "lottery/getRedLottery?" + param)
                    .then(response => {
                        // {errorCode: null, status: -1, msg: "获取异常", object: null}
                        if (response.status == 200) {
                            if (response.data.status == 1) {
                                // 如果是200，就调用彩红包明细接口
                                if (response.data.object.code == "200") {
                                    // 取得今日已砸蛋个数
                                    this.getRedLotteryCount(0);

                                    // 参数和请求彩红包的参数相同
                                    setTimeout(() => {
                                            let lotteryUrl = this.CONSTANT.lotteryRequestDetailUrl + "?" + param;
                                            this.$store.commit("pageToPage", "wineggToLottery");
                                            let pageParams = {
                                                goodsCommonid: this.goods.goodsCommonid
                                            };
                                            this.$store.commit("pageParams", pageParams);
                                            window.location.replace(lotteryUrl);
                                        }, 1500);
                                } else {
                                    // 彩红包取得失败时
                                    this.getRedLotteryFail();
                                }
                            } else {
                                // 彩红包取得失败时
                                this.getRedLotteryFail();
                            }
                        } else {
                            // 彩红包取得失败时
                            // {errorCode: null, status: -1, msg: "获取异常", object: null}
                            this.getRedLotteryFail();
                        }
                    })
                    .catch(error => {
                        // 彩红包取得失败时
                        this.getRedLotteryFail();
                    });
            } else {
                // 如果没有砸中，提示用户分享本页面商品就能再得一次机会
                // 初始时：0； 可以分享：2； 分享成功：1； 机会已用完：3
                if (this.todateEggsInfo.clickNum == 0) {
                    // 带有分项提示的信息放到活动规则内
                    // this.retHtml = "很遗憾，您今日未中奖！明天再来试试手气！<br> 如果您分享本页面商品就能再得一次机会！";
                    this.retHtml = "很遗憾，您未中奖！分享本页面商品就能再得一次机会！";
                    this.dealFlg = "2";
                    let opt = {
                        goodsCommonid: this.goods.goodsCommonid,
                        name: this.goods.goodsName,
                        img: this.shareGoodsImage,
                        inMode: this.$store.state.inMode,
                        eggShared: 2    // 设置更新后的值
                    };
                    this.$store.commit("scan", opt);

                    //商品分享
                    // 先更新砸蛋次数、再取得已经砸蛋个数
                    this.updateTodayInfo(2);
                }
                if (this.todateEggsInfo.clickNum == 1) {
                    this.retHtml = "很遗憾，您今日未中奖！明天再来试试手气！";
                    this.$store.commit("scan", "");
                    
                    // 先更新砸蛋次数、再取得已经砸蛋个数
                    this.updateTodayInfo(3);
                }
            }
        },
        getRedLotteryFail() {
            // this.$dialog.alert({ mes: "彩红包取得失败！你可以继续免费砸蛋！" });
            // // 因领取失败的原因，就可以继续重新开始砸
            // if (this.todateEggsInfo.clickNum == 1) {
            //     this.updateTodayInfo(0);
            // }

            // 红包库存已用完。。。
            // 库存已用完的话，就不能继续重新开始砸
            this.retHtml = "很遗憾，今日彩红包已领完！明天再来试试手气！";
            this.$store.commit("scan", "");

            // 显示锤子，继续砸蛋
            this.hammerShow = true;

            // 先更新砸蛋次数、再取得已经砸蛋个数
            this.updateTodayInfo(3);
        },
        updateTodayInfo(clickNum) {
            // 更新砸蛋次数
            this.$httpAjax.post(this.CONSTANT.wapiBaseUrl + 'winEggs/updateTodayInfo?clickNum='+clickNum)
                .then((response) => {
                    if (response.status == 200) {
                        if (response.data.status == 1) {
                            // this.$dialog.toast({
                            //     mes: '恭砸蛋次数更新成功!',
                            //     timeout: 1500
                            // });
                            // 页面不用跳转

                            // 分享后的数据更新的场合
                            if (clickNum == 1) {
                                // 取得今日砸蛋信息，今日没有的话，就登录一条数据
                                this.getTodayEggsInfo();
                            } else {
                                // clickNum=2、3时
                                // 取得今日已砸蛋个数
                                this.getRedLotteryCount(0);
                            }
                        } else {
                            this.$dialog.toast({
                                mes: response.data.msg,
                                timeout: 1500
                            });
                        }
                    }
                }).catch((error) => {
                    this.$dialog.loading.close();
                    this.$dialog.toast({
                        mes: '砸蛋次数更新失败，请稍后重试:' + error,
                        icon: 'error',
                        timeout: 1500
                    });
                });
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/*展示的商品图片、名称 */
.goodsInfo_li {
  width: 100%;
  height: 2rem;
  padding-top: 5px;
  padding-bottom: 5px;
  overflow: hidden;
  border-bottom: 1px solid #bbbbbb;
}

.goodsInfo_img {
  float: left;
  padding-left: 0.2rem;
  width: 48%;
  height: 100%;
  overflow: hidden;
}
.goodsInfo_img img {
  width: 100%;
  height: auto;
  /* min-height: 100%; */
  max-width: 100%; 
  max-height: 100%;
}

.goodsInfo_img1 {
  float: left;
  padding-left: 0.3rem;
  width: 48%;
  height: 100%;
  overflow: hidden;
}
.goodsInfo_img1 img {
  width: 100%;
  height: auto;
  /* min-height: 100%; */
  max-width: 100%; 
  max-height: 100%;
}

.goodsInfo_list {
  padding-left: 0.2rem;
  height: 100%;
  box-sizing: border-box;
  padding-top: 0.3rem;
  overflow: hidden;
}
.goodsInfo_list .goodsInfo_title {
  color: #333;
  font-size: 16px;
  overflow: hidden;
  height: 0.4rem;
  line-height: 0.4rem;
}

/*商品分项说明图片*/
.weixinTip {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 1000;
    background-color: rgba(0,0,0,0.8);
    filter: alpha(opacity=80);
}
.weixinTip p {
    text-align: center;
    padding-left: 5%;
    padding-right: 2%;
}
.weixinTip img {
    display: block;
    width: 97%;
    height: 96%;
}

/*砸蛋页面*/
.egg {
  width: 100%;
  /* height:290px;  */
  height: 250px;
  margin: 0 auto;
}
.egg ul li {
  z-index: 999;
}
.eggList {
  padding-top: 80px;
  position: relative;
  width: 100%;
}

/* 砸蛋前 */
.hammer {
  background: url(../../assets/img-6.png) no-repeat;
  width: 74px;
  height: 87px;
  position: absolute;
  text-indent: -9999px;
  z-index: 150;
  left: 238px;
  /* top:55px; */
  top: 40px;
}
.curr1 {
  background: url(../../assets/egg_1.png) no-repeat bottom;
  background-size: 100%;
  width: 168px;
  /* height:207px; */
  height: 200px;
  cursor: pointer;
  position: relative;
  margin: 0 auto;
}

/* 砸蛋后 */
.resultTip {
  position: absolute;
  background: #ffc;
  /* width:148px; */
  width: 170px;
  height: auto;
  line-height: 20px;
  padding: 6px;
  /* top:220px;   */
  top: 50px;
  border-radius: 2px;
  /* left:80px;  */
  left: 100px;
  color: #f60;
  text-align: center;
  overflow: hidden;
  z-index: 1000;
}
.resultTip b {
  font-size: 14px;
  display: block;
  height: 100%;
}
.curr2 {
  background: url(../../assets/egg_2.png) no-repeat bottom;
  cursor: default;
  z-index: 300;
  background-size: 100%;
  width: 168px;
  /* height:207px; */
  height: 200px;
  position: relative;
  margin: 0 auto;
}
.sup {
  background: url(../../assets/img-4.png) no-repeat;
  width: 232px;
  height: 181px;
  top: -36px;
  left: -34px;
  z-index: -100;
  position: absolute;
}

/*砸蛋个数显示*/
.box_tit {
  text-align: center;
  width: 100%;
  height: auto;
  overflow: hidden;
}
.box_top {
  height: 30px;
  line-height: 30px;
  color: #fff;
  margin-top: 40px;
  /* margin-bottom: 20px; */
  margin-bottom: 10px;
  font-size: 16px;
}
.box_top span {
  color: #f0f026;
  margin: 0 2px;
}

/*滚动显示*/
.swiper-container {
  height: 120px;
  overflow: hidden;
  font-size: 14px;
  margin: 0.2rem 0;
  color: #f0f026;
}
.swiper-container .swiper-slide {
  display: block;
  width: 100%;
  height: 26px;
  text-align: center;
  line-height: 26px;
}

/*活动规则*/
.activity {
  width: 100%;
  height: auto;
  /* margin: 0.4rem 0; */
  /* margin-top: 30px; */
  margin-top: 10px;
  overflow: hidden;
}
.activity span {
  display: block;
  padding: 0 10px;
  color: #fff;
  font-size: 14px;
  margin: 0 auto;
  height: 32px;
  width: 80px;
  border-radius: 5px;
  text-align: center;
  line-height: 32px;
  background: #95271c;
}

.l_cps {
  width: 80%;
  margin: 0 auto;
  /* display:none; */
  padding: 10px 0;
  padding-left: 10px;
  height: auto;
  line-height: 30px;
}
.l_cps ul {
  text-align: justify;
  list-style-type: decimal;
  padding-bottom: 15px;
}
.l_hh {
  text-align: center;
  line-height: 36px;
  height: 44px;
  color: #f60;
  font-weight: bold;
  font-size: 16px;
}
.l_cps li {
  color: #f60;
  line-height: 24px;
  font-size: 14px;
}
</style>